<template>
  <div class="app-container towTabel">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select placeholder="选择门店" @change="storeChange" v-model="formInline.store_id" style="width:300px" filterable>
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px">
            <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <p class="chartTitle">机台离线预警<el-tooltip style="marginLeft:10px;" placement="bottom" effect="light">
          <div slot="content">每天早上6点后统计机台当天离线时长<br />未开机的机台不进行统计</div><i style="color:#409eff;cursor: pointer;" class="el-icon-question"></i>
        </el-tooltip>
      </p>
      <el-row class="chart" style="background:#fff;">
        <div class="bar-legend" style="width:400px">
          <div class="bar-item">
            <div class="bar-color blue"></div>
            <div class="text">0-30分钟</div>
          </div>
          <div class="bar-item">
            <div class="bar-color yellow"></div>
            <div class="text">31-60分钟</div>
          </div>
          <div class="bar-item">
            <div class="bar-color orange"></div>
            <div class="text">61-120分钟</div>
          </div>
          <div class="bar-item">
            <div class="bar-color red"></div>
            <div class="text">120分钟以上</div>
          </div>
        </div>
        <div>
          <bar-chart :chartData="chartData" />
        </div>
      </el-row>
      <br>
      <hr class="DJhr">
      <br>
      <p class="chartTitle">机台网络波动<el-tooltip style="marginLeft:10px;" placement="bottom" effect="light">
          <div slot="content">1.网络波动次数是指当前时间段内在线或离线的总次数<br />2.波动次数越多机台网络状况越不稳定<br />3.波动频次越高网络状况越不稳定（红绿相间越频繁）</div><i style="color:#409eff;cursor: pointer;"
            class="el-icon-question"></i>
        </el-tooltip>
      </p>
      <div class="network">
        <div class="networkTitle">近60分钟波动次数</div>
        <div class="bar-legend" style="width:200px">
          <div class="bar-item">
            <div class="bar-color online"></div>
            <div class="text">在线</div>
          </div>
          <div class="bar-item">
            <div class="bar-color offline"></div>
            <div class="text">离线</div>
          </div>
        </div>
        <el-row v-for="(data,i) of networkData" :key="i" style="margin-bottom:40px">
          <el-col :span="2" style="text-align:right;padding-right:20px">{{data[0].count}}次</el-col>
          <el-col :span="20">
            <div class="bar-network">
              <div class="bar-item" :style="{left:item.left+'%',width:item.width+'%'}" :class="{'online':item.state==1,'offline':item.state==0}"
                v-for="(item,i) of data" :key="i"></div>
            </div>
            <div class="intro">{{data[0].area_name}} - {{data[0].type_name}} - {{data[0].no}}/{{data[0].machine_id}}</div>
          </el-col>

        </el-row>
      </div>
    </div>
    <!-- 自定义底部 -->
  </div>
</template>
<script>
import { getStore, getArea, olWarning, networkF } from '@/api/dashboard/offlineMonitor';
import BarChart from './components/BarChart';
import { sortBy } from '@/utils';
export default {
  data() {
    return {
      listLoading: false,
      store_list: null,
      area_list: [],
      total_list: [],
      formInline: {
        brand: '',
        store_id: '',
        area_id: '',
        look_del: '0'
      },
      firstShow: 0,
      chartData: {
        dimensions: ['clevice_id', 'minute'],
        source: []
      },
      networkData: []
    };
  },
  activated() {
    if (this.$route.params.store_id || !this.store_list) {
      this.getstore();
    }
  },
  methods: {
    getstore() {
      this.listLoading = true;
      getStore({ look_del: this.formInline.look_del, brand: this.formInline.brand, category_id: 126 }).then(response => {
        this.store_list = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.store_list.length > 0) {
            this.formInline.store_id = this.store_list[0].id;
          }
        }
        if (this.$route.params.store_id) {
          this.formInline.store_id = this.$route.params.store_id;
        }
        this.getarea();
      });
    },
    getarea() {
      getArea({ sid: this.formInline.store_id, category_id: 407 }).then(response => {
        response.unshift({ id: '', name: '全部区域' });
        this.area_list = response;
        if (this.firstShow == 0 || this.$route.params.store_id) {
          this.getBarData();
          this.getNetworkData();
          this.firstShow = 1;
        }
      });
    },
    //获取离线预警信息
    getBarData() {
      olWarning({ store_id: this.formInline.store_id, area_id: this.formInline.area_id }).then(res => {
        this.chartData.source = [];
        if (res.length > 0) {
          res.forEach(val => {
            val.minute = Math.round(val.off_time / 60);
            val.time = val.time.replace(/\//g, '-');
          });
          this.chartData.source = res;
        }
        this.listLoading = false;
      });
    },
    //获取网络波动信息
    getNetworkData() {
      this.networkData = [];
      networkF({ store_id: this.formInline.store_id, area_id: this.formInline.area_id }).then(res => {
        if (res.length > 0) {
          res.forEach(list => {
            let time = 0;
            let allLeft = 0;
            let totalTime = list.reduce((prev, item) => item.duration / 1 + prev, 0);
            let l = 0;
            list.forEach(val => {
              l++;
              val.left = allLeft;
              val.width = (val.duration / totalTime) * 100 < 0.1 ? 0.1 : ((val.duration / totalTime) * 100).toFixed(1);
              allLeft = (val.width / 1 + allLeft / 1).toFixed(1);
              if (l == list.length) {
                if (allLeft < 100) {
                  val.width = (val.width / 1 + 100 - allLeft / 1).toFixed(1);
                } else if (allLeft > 100) {
                  val.width = (val.width / 1 - allLeft / 1 + 100).toFixed(1);
                }
                if (val.width < 0.1) {
                  val.width = 0.1;
                }
              }
              time += val.duration / 1;
            });
          });
          this.networkData = res;
        }
        this.listLoading = false;
      });
    },
    // 搜索
    searchClick() {
      this.listLoading = true;
      this.getBarData();
      this.getNetworkData();
    },
    storeChange() {
      this.getarea();
      this.formInline.area_id = '';
    }
  },
  components: {
    BarChart
  }
};
</script>

<style lang="scss" scoped>
div.customContainer {
  overflow-y: auto;
}
div.bar-legend {
  z-index: 100;
  position: absolute;
  top: 3%;
  right: 10%;
  display: flex;
  justify-content: space-around;
  font-size: 10px;
  div.bar-item {
    text-align: center;
    div.text {
      width: 70px;
      margin-top: 5px;
    }
    div.bar-color {
      width: 50px;
      height: 5px;
      margin: 0 auto;
    }
    div.bar-color.blue {
      background: #fdc927;
    }
    div.bar-color.yellow {
      background: #ff8f2b;
    }
    div.bar-color.orange {
      background: #ff4242;
    }
    div.bar-color.red {
      background: #bd2b2b;
    }
    div.bar-color.online {
      background: #50d57f;
    }
    div.bar-color.offline {
      background: #f86464;
    }
  }
}
div.network {
  background: #fff;
  position: relative;
  padding: 20px 0;
  margin-bottom: 50px;
  div.networkTitle {
    margin-left: 4%;
    margin-bottom: 20px;
  }
}
div.network div.bar-network {
  position: relative;
  div.bar-item {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
  }
  div.bar-item.online {
    background: rgba(80, 213, 127, 1);
  }
  div.bar-item.offline {
    background: rgba(248, 100, 100, 1);
  }
}
div.network div.intro {
  position: relative;
  top: 25px;
  left: 0;
  color: #999;
  font-size: 14px;
}
</style>


